<template>
  <div>
  <el-container>
    <el-header>
      <div>
<!--        <img src="../../assets/favicon1.png" alt="" id="img">-->
        <span>小王在线商城</span>
      </div>
<!--      个人信息导航栏-->
      <el-menu
      :default-active="1+''"
      class="el-menu-top"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-menu-item index="1" @click="goCart" >🛒购物车</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的商城</template>
        <el-menu-item index="2-1">买过的商品</el-menu-item>
        <el-menu-item index="2-2">我的订单</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    </el-header>
<!--    左侧一级商品导航栏-->
    <el-container>
      <el-aside width="200px">
          <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened
                    :collapse-transition="false"  :default-active="activePath">
            <!-- 一级菜单 -->
            <el-menu-item title="shop" :index="item.cat_id + ''" v-for="item in memuList" :key="item.id">
              <!-- 一级菜单的模板区域 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-goods"></i>
                <!-- 文本 -->
                <span>{{item.cat_name}}</span>
                <i class="el-icon-caret-right"></i>
              </template>
             </el-menu-item>
          </el-menu>
      </el-aside>
      <el-main>
    <!-- 路由占位符-->
        <router-view></router-view>
      </el-main>
  </el-container>
    <!-- 页尾展示区域-->
    <el-footer> <span>王波在线&copy;2020</span></el-footer>
  </el-container>
<!--    登陆对话框-->
    <el-dialog
      title="请先登陆"
      :visible.sync="showLoginFormVisible"
      width="50%"
      >
      <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showLoginFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="login">登陆</el-button>
        <el-button type="primary" v-if=" !showApplyButtonVisible" @click="showApplyFormVisible=true, showLoginFormVisible = false">申请账号</el-button>
  </span>
    </el-dialog>

    <!--    注册账号对话框-->
    <el-dialog
      title="欢迎注册账号"
      :visible.sync="showApplyFormVisible"
      width="50%"
    >
      <el-form :model="applyForm" :rules="applyFormRules" ref="applyFormRef" label-width="10%">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="applyForm.username" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="applyForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkpass">
          <el-input v-model="applyForm.checkpass"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="applyForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="applyForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showLoginFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="applyCount">注册</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }

      cb(new Error('请输入合法的邮箱'))
    }

    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的手机号'))
    }

    //  验证电话号码
    var passWord = (rule, value, cb) => {
      if (value === '') {
        cb(new Error('请输入密码'))
      } else {
        if (this.applyForm.checkpass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        cb()
      }
    }
    // 验证确认的密码
    var checkPass = (rule, value, cb) => {
      if (value === '') {
        cb(new Error('请再次输入密码'))
      } else if (value !== this.applyForm.password) {
        cb(new Error('两次输入密码不一致!'))
      } else {
        cb()
      }
    }

    return {
      //  头部导航栏数据
      memuList: [],
      // 被激活的链接地址
      activePath: '',
      //  是否显示登陆对话框
      showLoginFormVisible: false,
      //  登陆表单绑定的数据
      loginForm: {
        username: '',
        password: ''
      },
      //  登陆校验规则
      loginFormRules: {
        username: [
          { required: true, message: '请输入登陆名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      //  注册校验规则
      applyFormRules: {
        username: [
          { required: true, message: '请输入登陆名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 6 到 15 个字符', trigger: 'blur' },
          { validator: passWord, message: '保证两次密码一致' }
        ],
        checkpass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkPass, message: '两次密码不一致', trigger: 'blur' }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          { validator: checkMobile, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ]

      },
      //  是否显示注册对话框
      showApplyFormVisible: false,
      //  注册对话框绑定的数据
      applyForm: {
        username: '',
        password: '',
        mobile: '',
        email: ''
      },
      //  是否显示注册账号按钮
      showApplyButtonVisible: true
    }
  },
  created () {
    // this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    //  获取所有菜单
    async getMenuList () {
      const { data: res } = await this.$http.get('categories')
      console.log(res.data)
      if (res.meta.status !== 200) {
        return this.$message.error('获取菜单列表失败！')
      }
      this.memuList = res.data
    },
    goCart () {
      if (window.sessionStorage.getItem('token').length === 2) {
        this.$router.push('/cart')
      }
      // this.$router.push('/shop_login')
      this.showLoginFormVisible = true
      // return this.$message.error('请先登陆！')
    },
    //  登陆操作
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        //  发起登陆的网络请求
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) {
          return this.$message.error('登陆失败！')
        }
        this.$message.success('登陆成功！')
        this.$refs.loginFormRef.resetFields()
        this.showLoginFormVisible = false
        this.getMenuList()
        this.$router.push('/cart')
        console.log(res.data)
      })
    },
    //  申请账号注册操作
    async applyCount() {
      this.showApplyFormVisible = true
      const { data: res } = await this.$http.post('users', this.applyForm)
      if (res.meta.status !== 201) {
        return this.$message.error('注册账号失败！')
      }
      this.$message.success('注册账号成功！')
      this.showApplyButtonVisible = false
      this.showLoginFormVisible = true
    }
  }
}
</script>
<style lang="less" scoped>
  .home-container{
    height: 100%;
  }
  .el-header,
  .el-footer{
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
    line-height: 60px;

    > div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
      }
      //  header 工作栏
      .el-menu{
        position: absolute;
        right: 0;
      }
    }
  }
  .el-footer >span{
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  .el-aside {
    background-color: #333744;
    color: #eeeeee;
  }
  .el-footer{
    height: 30px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }

  /*左侧菜单栏的布局*/
  .el-row {
    margin-bottom: 20px;
    width: 100%;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
.img{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

/*.el-header{*/
/*  height: 15px !important;*/
/*}*/
  /*.el-menu-top{*/
  /*  height: 100% !important;*/
  /*  > .el-submenu{*/
  /*    height: 100%;*/
  /*    > .el-menu-item{*/
  /*      height: 100%;*/
  /*    }*/
  /*  }*/

  /*}*/
</style>
